/*
 Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
*/
/* stylelint-disable */

@use '../internal/styles' as styles;
@use '../internal/styles/tokens' as awsui;
@use '../internal/styles/foundation/' as foundation;
@use '../internal/styles/forms/constants' as constants;
@use '../internal/generated/custom-css-properties/index.scss' as custom-props;
@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;

$send-icon-right-spacing: awsui.$space-static-xxs;
$invalid-border-offset: constants.$invalid-control-left-padding;

.root {
  @include styles.styles-reset;
  @include styles.control-border-radius-full();
  cursor: text;

  background-color: var(#{custom-props.$promptInputStyleBackgroundDefault}, awsui.$color-background-input-default);

  border-block: awsui.$border-width-field solid
    var(#{custom-props.$promptInputStyleBorderColorDefault}, awsui.$color-border-input-default);
  border-inline: awsui.$border-width-field solid
    var(#{custom-props.$promptInputStyleBorderColorDefault}, awsui.$color-border-input-default);

  box-shadow: var(#{custom-props.$promptInputStyleBoxShadowDefault});

  &:hover {
    background-color: var(
      #{custom-props.$promptInputStyleBackgroundHover},
      var(#{custom-props.$promptInputStyleBackgroundDefault}, awsui.$color-background-input-default)
    );
    border-color: var(
      #{custom-props.$promptInputStyleBorderColorHover},
      var(#{custom-props.$promptInputStyleBorderColorDefault}, awsui.$color-border-input-default)
    );
    box-shadow: var(
      #{custom-props.$promptInputStyleBoxShadowHover},
      var(#{custom-props.$promptInputStyleBoxShadowDefault})
    );
  }

  &.textarea-readonly {
    @include styles.form-readonly-element(
      $background-color: var(
          #{custom-props.$promptInputStyleBackgroundReadonly},
          var(#{custom-props.$promptInputStyleBackgroundDefault}, awsui.$color-background-input-default)
        ),
      $border-color: var(
          #{custom-props.$promptInputStyleBorderColorReadonly},
          var(#{custom-props.$promptInputStyleBorderColorDefault}, awsui.$color-border-input-disabled)
        )
    );
    box-shadow: var(#{custom-props.$promptInputStyleBoxShadowReadonly});
  }

  &.disabled {
    @include styles.form-disabled-element(
      $background-color: var(
          #{custom-props.$promptInputStyleBackgroundDisabled},
          awsui.$color-background-input-disabled
        ),
      $border-color: var(#{custom-props.$promptInputStyleBorderColorDisabled}, awsui.$color-border-input-disabled),
      $color: var(#{custom-props.$promptInputStyleColorDisabled}, awsui.$color-text-input-disabled),
      $cursor: default
    );
    box-shadow: var(#{custom-props.$promptInputStyleBoxShadowDisabled});
  }

  &.textarea-invalid {
    @include styles.form-invalid-control(
      $color: var(#{custom-props.$promptInputStyleColorDefault}, awsui.$color-text-status-error),
      $border-color: var(#{custom-props.$promptInputStyleBorderColorDefault}, awsui.$color-text-status-error)
    );
    & {
      padding-inline-start: 0;
    }

    &:focus-within,
    &:focus {
      @include styles.form-invalid-control(
        $color: var(#{custom-props.$promptInputStyleColorDefault}, awsui.$color-text-status-error),
        $border-color: var(#{custom-props.$promptInputStyleBorderColorDefault}, awsui.$color-text-status-error)
      );
      & {
        padding-inline-start: 0;
        box-shadow: foundation.$box-shadow-focused-light-invalid;
      }
    }
  }

  &.textarea-warning {
    @include styles.form-warning-control(
      $color: var(#{custom-props.$promptInputStyleColorDefault}, awsui.$color-text-status-warning),
      $border-color: var(#{custom-props.$promptInputStyleBorderColorDefault}, awsui.$color-text-status-warning)
    );
    & {
      padding-inline-start: 0;
    }

    &:focus-within,
    &:focus {
      @include styles.form-warning-control(
        $color: var(#{custom-props.$promptInputStyleColorDefault}, awsui.$color-text-status-warning),
        $border-color: var(#{custom-props.$promptInputStyleBorderColorDefault}, awsui.$color-text-status-warning)
      );
      & {
        padding-inline-start: 0;
        box-shadow: foundation.$box-shadow-focused-light-invalid;
      }
    }
  }

  &:focus-within,
  &:focus {
    @include styles.form-focus-element(
      $border-color: var(#{custom-props.$promptInputStyleBorderColorFocus}, awsui.$color-border-input-focused),
      $box-shadow: var(#{custom-props.$promptInputStyleBoxShadowFocus}, foundation.$box-shadow-focused-light)
    );
    background-color: var(#{custom-props.$promptInputStyleBackgroundFocus}, awsui.$color-background-input-default);
  }
}

.textarea {
  @include styles.styles-reset;
  @include styles.control-border-radius-full();
  @include styles.font-body-m;
  // Restore browsers' default resize values
  resize: none;
  // Restore default text cursor
  cursor: text;
  // Allow multi-line placeholders
  white-space: pre-wrap;
  background-color: inherit;

  padding-block: styles.$control-padding-vertical;
  padding-inline: styles.$control-padding-horizontal;

  color: var(#{custom-props.$promptInputStyleColorDefault}, awsui.$color-text-body-default);
  max-inline-size: 100%;
  inline-size: 100%;
  display: block;
  box-sizing: border-box;

  border: 0;

  &::placeholder {
    @include styles.form-placeholder(
      $color: var(#{custom-props.$promptInputStylePlaceholderColor}, awsui.$color-text-input-placeholder),
      $font-size: var(#{custom-props.$promptInputStylePlaceholderFontSize}),
      $font-style: var(#{custom-props.$promptInputStylePlaceholderFontStyle}, italic),
      $font-weight: var(#{custom-props.$promptInputStylePlaceholderFontWeight})
    );
    opacity: 1;
  }

  &:hover {
    color: var(
      #{custom-props.$promptInputStyleColorHover},
      var(#{custom-props.$promptInputStyleColorDefault}, awsui.$color-text-body-default)
    );
  }

  &:focus {
    outline: none;
    color: var(
      #{custom-props.$promptInputStyleColorFocus},
      var(#{custom-props.$promptInputStyleColorDefault}, awsui.$color-text-body-default)
    );
  }

  &:invalid {
    // discard built-in invalid styles, customers should use `invalid` property only (AWSUI-3947)
    box-shadow: none;
  }

  &.invalid,
  &.warning {
    padding-inline-start: $invalid-border-offset;
  }

  &:disabled {
    color: var(#{custom-props.$promptInputStyleColorDisabled}, awsui.$color-text-input-disabled);
    cursor: default;

    &::placeholder {
      @include styles.form-placeholder-disabled;
      opacity: 1;
    }
  }

  &-readonly {
    color: var(
      #{custom-props.$promptInputStyleColorReadonly},
      var(#{custom-props.$promptInputStyleColorDefault}, awsui.$color-text-body-default)
    );
  }

  &-wrapper {
    display: flex;
  }
}

.primary-action {
  align-self: flex-end;
  flex-shrink: 0;
  padding-inline-start: calc(styles.$control-padding-horizontal / 2);

  .textarea-wrapper > & {
    padding-inline-end: calc(styles.$control-padding-horizontal / 2);

    > .action-button {
      margin-block-end: awsui.$space-scaled-xxxs;
      padding: 0;
    }
  }
}

.secondary-content {
  @include styles.styles-reset;
  @include styles.control-border-radius-full();

  &.with-paddings {
    padding-block-start: awsui.$space-scaled-s;
    padding-block-end: awsui.$space-scaled-s;
    padding-inline-start: styles.$control-padding-horizontal;
    padding-inline-end: styles.$control-padding-horizontal;

    &.invalid,
    &.warning {
      padding-inline-start: $invalid-border-offset;
    }
  }
}

.action-stripe {
  @include styles.styles-reset;
  @include styles.control-border-radius-full();
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.secondary-actions {
  flex-basis: max-content;
  flex-grow: 0;
  flex-shrink: 1;
  box-sizing: border-box;
  @include styles.text-flex-wrapping;
  &.with-paddings {
    padding-inline: styles.$control-padding-horizontal;
    padding-block-start: awsui.$space-scaled-s;
    padding-block-end: styles.$control-padding-vertical;

    &.invalid,
    &.warning {
      padding-inline-start: $invalid-border-offset;
    }
  }
  &.with-paddings-and-actions {
    padding-inline-end: 0;
  }
}

.buffer {
  flex: 1;
  align-self: stretch;
  cursor: text;
}
